<template>
  <div class="page">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <!--<div class="swiper-scrollbar"></div>-->
    </div>
    <div class="flex">
      dsafas
    </div>
  </div>
</template>

<script type="es6">
  export default {
    name: "test",
    data() {
      return {
        hotGoods: [
          {
            "goods_name": "测试商品6",
            "id": 139,
            "title": "测试商品6",
            "keywords": [
              "sda"
            ],
            "price": 0,
            "sell_price": 0,
            "official_price": 0
          },
          {
            "goods_name": "有限公司注册",
            "id": 4,
            "title": "足不出户一站式对一服务，省时，省心，省钱，更省事",
            "keywords": [
              "质量高效",
              "专业快速",
              "完善售后"
            ],
            "price": 280,
            "sell_price": 1065,
            "official_price": 600
          },
          {
            "goods_name": "APP定制开发",
            "id": 5,
            "title": "APP定制开发，专业团队，能力优质",
            "keywords": [
              "技术过硬",
              "效率高速",
              "反馈优质"
            ],
            "price": 888,
            "sell_price": 20000,
            "official_price": 0
          },
          {
            "goods_name": "公司核名",
            "id": 92,
            "title": "专业团队，一站式服务，省心更省钱",
            "keywords": [
              "质量保证",
              "专业服务"
            ],
            "price": 200,
            "sell_price": 288,
            "official_price": 0
          },
          {
            "goods_name": "创业简约套餐",
            "id": 131,
            "title": "创业简约套餐",
            "keywords": [
              "创业套餐",
              "简约套餐",
              "简约",
              "创业",
              "套餐",
              "创业初期"
            ],
            "price": 2080,
            "sell_price": 2528,
            "official_price": 0
          },
          {
            "goods_name": "编制财务报表",
            "id": 29,
            "title": "专业代办,一站服务,无忧售后",
            "keywords": [
              "售后完善",
              "质量保证",
              "高效快速"
            ],
            "price": 500,
            "sell_price": 600,
            "official_price": 0
          },
          {
            "goods_name": "执照加急服务",
            "id": 94,
            "title": "专业团队，一站式服务，省心更省钱",
            "keywords": [
              "售后完善",
              "专业服务"
            ],
            "price": 600,
            "sell_price": 688,
            "official_price": 0
          },
          {
            "goods_name": "域名ICP备案",
            "id": 130,
            "title": "专业团队，一站式服务，省时高效",
            "keywords": [
              "ICP",
              "域名",
              "备案",
              "域名ICP备案",
              "IPC备案",
              "域名ICP"
            ],
            "price": 200,
            "sell_price": 260,
            "official_price": 0
          },
          {
            "goods_name": "视频作品著作权登记",
            "id": 81,
            "title": "专业，便捷，贴心",
            "keywords": [
              "售后完善",
              "高效快速"
            ],
            "price": 1700,
            "sell_price": 1900,
            "official_price": 0
          },
          {
            "goods_name": "美术作品登记",
            "id": 79,
            "title": "专业，便捷，贴心",
            "keywords": [
              "高效快速",
              "质量保证"
            ],
            "price": 549,
            "sell_price": 700,
            "official_price": 0
          },
          {
            "goods_name": "简易注销",
            "id": 129,
            "title": "专业团队申请，服务快捷无忧",
            "keywords": [
              "简易注销",
              "简易",
              "注销"
            ],
            "price": 998,
            "sell_price": 1088,
            "official_price": 0
          },
          {
            "goods_name": "商标注册",
            "id": 42,
            "title": "专业，便捷，贴心",
            "keywords": [
              "质量保证",
              "高效快速",
              "售后完善"
            ],
            "price": 698,
            "sell_price": 1280,
            "official_price": 0
          },
          {
            "goods_name": "著作权许可备案",
            "id": 83,
            "title": "专业，便捷，贴心",
            "keywords": [
              "质量保证",
              "高效快速"
            ],
            "price": 1000,
            "sell_price": 1200,
            "official_price": 0
          },
          {
            "goods_name": "分公司注册",
            "id": 96,
            "title": "专业团队，一站式服务，省心更省钱",
            "keywords": [
              "质量保证",
              "高效快速"
            ],
            "price": 888,
            "sell_price": 1070,
            "official_price": 0
          },
          {
            "goods_name": "软件著作权登记",
            "id": 89,
            "title": "专业团队，一站式服务，省时高效",
            "keywords": [
              "专业服务",
              "质量保证",
              "软著代办"
            ],
            "price": 498,
            "sell_price": 1499,
            "official_price": 0
          },
          {
            "goods_name": "工商年检",
            "id": 13,
            "title": "专业团队申请，服务快捷无忧",
            "keywords": [
              "质量保证",
              "质量保证",
              "质量保证"
            ],
            "price": 250,
            "sell_price": 500,
            "official_price": 100
          },
          {
            "goods_name": "文字作品登记",
            "id": 87,
            "title": "专业，便捷，贴心",
            "keywords": [
              "质量保证",
              "专业服务"
            ],
            "price": 549,
            "sell_price": 766,
            "official_price": 0
          },
          {
            "goods_name": "合伙企业注册",
            "id": 99,
            "title": "专业团队，一站式服务，省时高效",
            "keywords": [
              "售后完善",
              "专业服务"
            ],
            "price": 2000,
            "sell_price": 2400,
            "official_price": 0
          },
          {
            "goods_name": "外资公司注册",
            "id": 98,
            "title": "专业团队申请，服务快捷无忧",
            "keywords": [
              "专业服务",
              "省时高效"
            ],
            "price": 3000,
            "sell_price": 3600,
            "official_price": 0
          },
          {
            "goods_name": "著作权变更",
            "id": 82,
            "title": "专业，便捷，贴心",
            "keywords": [
              "售后完善",
              "专业服务"
            ],
            "price": 1000,
            "sell_price": 1200,
            "official_price": 0
          },
          {
            "goods_name": "个体公司注册",
            "id": 95,
            "title": "专业团队，一站式服务，省心更省钱",
            "keywords": [
              "专业服务",
              "售后完善"
            ],
            "price": 688,
            "sell_price": 825,
            "official_price": 0
          },
          {
            "goods_name": "社保公积金代户",
            "id": 91,
            "title": "社保公积金代户",
            "keywords": [
              "社保代户",
              "公积金代户"
            ],
            "price": 49,
            "sell_price": 70,
            "official_price": 0
          },
          {
            "goods_name": "道路运输许可证",
            "id": 106,
            "title": "价格合理，效率快捷，全程代办服务",
            "keywords": [
              "高效快速",
              "价格透明",
              "服务保障"
            ],
            "price": 27000,
            "sell_price": 32400,
            "official_price": 0
          },
          {
            "goods_name": "公积金开户",
            "id": 93,
            "title": "专业团队申请，服务快捷无忧",
            "keywords": [
              "公积金开户"
            ],
            "price": 500,
            "sell_price": 650,
            "official_price": 0
          },
          {
            "goods_name": "开户银行注销",
            "id": 115,
            "title": "专业团队申请，服务快捷无忧",
            "keywords": [
              "开户银行注销",
              "银行注销",
              "注销"
            ],
            "price": 1500,
            "sell_price": 1500,
            "official_price": 0
          },
          {
            "goods_name": "代理记账",
            "id": 14,
            "title": "专业代理，减少成本，合理避税",
            "keywords": [
              "质量高效",
              "专业快速"
            ],
            "price": 500,
            "sell_price": 900,
            "official_price": 200
          },
          {
            "goods_name": "商标撤三申请",
            "id": 128,
            "title": "正规专业，快捷无忧，贴心售后",
            "keywords": [
              "商标",
              "撤三",
              "商标撤三",
              "商标撤三申请",
              "撤三申请"
            ],
            "price": 4500,
            "sell_price": 5000,
            "official_price": 0
          },
          {
            "goods_name": "国际专利申请",
            "id": 74,
            "title": "专业团队申请，服务快捷无忧",
            "keywords": [
              "专业服务",
              "高效快速"
            ],
            "price": 666,
            "sell_price": 777,
            "official_price": 0
          },
          {
            "goods_name": "专利实施许可合同备案",
            "id": 69,
            "title": "专业，便捷，贴心",
            "keywords": [
              "高效快速",
              "专业服务"
            ],
            "price": 1000,
            "sell_price": 1200,
            "official_price": 0
          },
          {
            "goods_name": "专利年费缴纳",
            "id": 63,
            "title": "专业，便捷，贴心",
            "keywords": [
              "质量保证",
              "高效快速",
              "知识产权"
            ],
            "price": 90,
            "sell_price": 777,
            "official_price": 0
          },
          {
            "goods_name": "专利无效业务",
            "id": 64,
            "title": "专业代办,一站服务,无忧售后",
            "keywords": [
              "售后完善",
              "高效快速"
            ],
            "price": 20000,
            "sell_price": 22000,
            "official_price": 0
          },
          {
            "goods_name": "工本费",
            "id": 16,
            "title": "工本费",
            "keywords": [
              "质量保证",
              "质量保证",
              "质量保证"
            ],
            "price": 50,
            "sell_price": 80,
            "official_price": 0
          },
          {
            "goods_name": "外观专利申请",
            "id": 62,
            "title": "专业，便捷，贴心",
            "keywords": [
              "售后完善",
              "高效快速",
              "知识产权"
            ],
            "price": 1170,
            "sell_price": 1400,
            "official_price": 0
          },
          {
            "goods_name": "专利权恢复",
            "id": 78,
            "title": "专业团队，一站式服务，省时高效",
            "keywords": [
              "售后完善",
              "质量保证"
            ],
            "price": 666,
            "sell_price": 777,
            "official_price": 0
          },
          {
            "goods_name": "医疗器械许可证",
            "id": 110,
            "title": "极速申请办理，服务快捷高效",
            "keywords": [
              "售后完善",
              "价格透明"
            ],
            "price": 3500,
            "sell_price": 4200,
            "official_price": 0
          },
          {
            "goods_name": "著作权补证",
            "id": 88,
            "title": "专业团队，一站式服务，省时高效",
            "keywords": [
              "质量保证",
              "高效快速"
            ],
            "price": 1000,
            "sell_price": 1200,
            "official_price": 0
          },
          {
            "goods_name": "专利补正",
            "id": 77,
            "title": "专业团队，一站式服务，省心更省钱",
            "keywords": [
              "专业服务",
              "高效快速"
            ],
            "price": 666,
            "sell_price": 777,
            "official_price": 0
          },
          {
            "goods_name": "进出口许可证",
            "id": 107,
            "title": "一手办理，低风险，高效率，质量保证",
            "keywords": [
              "价格透明",
              "售后完善"
            ],
            "price": 4000,
            "sell_price": 5000,
            "official_price": 0
          },
          {
            "goods_name": "专利驳回复审",
            "id": 67,
            "title": "专业团队，一站式服务，省心更省钱",
            "keywords": [
              "专业服务",
              "质量保证"
            ],
            "price": 2500,
            "sell_price": 3000,
            "official_price": 0
          },
          {
            "goods_name": "音乐作品登记",
            "id": 85,
            "title": "专业代办,一站服务,无忧售后",
            "keywords": [
              "高效快速",
              "专业服务"
            ],
            "price": 1700,
            "sell_price": 1900,
            "official_price": 0
          },
          {
            "goods_name": "股份有限公司注册",
            "id": 97,
            "title": "专业团队，一站式服务，省时高效",
            "keywords": [
              "质量保证",
              "专业服务"
            ],
            "price": 3000,
            "sell_price": 3600,
            "official_price": 0
          },
          {
            "goods_name": "有限责任公司注册",
            "id": 100,
            "title": "无任何隐形消费，一站式服务，省时高效",
            "keywords": [
              "明码标价",
              "售后完善"
            ],
            "price": 888,
            "sell_price": 1065,
            "official_price": 0
          },
          {
            "goods_name": "工商变更",
            "id": 104,
            "title": "专人对接，服务到位，省时高效更放心",
            "keywords": [
              "售后完善",
              "专业服务"
            ],
            "price": 188,
            "sell_price": 530,
            "official_price": 0
          },
          {
            "goods_name": "出版物经营许可证",
            "id": 108,
            "title": "专业团队申请，服务快捷无忧",
            "keywords": [
              "售后完善",
              "价格透明"
            ],
            "price": 5000,
            "sell_price": 6000,
            "official_price": 0
          },
          {
            "goods_name": "银行变更",
            "id": 103,
            "title": "专业团队，一站式服务，省时高效",
            "keywords": [
              "质量保证",
              "高效快速"
            ],
            "price": 600,
            "sell_price": 720,
            "official_price": 0
          },
          {
            "goods_name": "旧账整理",
            "id": 30,
            "title": "专业代办,一站服务,无忧售后",
            "keywords": [
              "质量保证",
              "售后完善",
              "高效快速"
            ],
            "price": 950,
            "sell_price": 1050,
            "official_price": 0
          },
          {
            "goods_name": "学历认证",
            "id": 52,
            "title": "学历认证",
            "keywords": [
              "学历认证"
            ],
            "price": 300,
            "sell_price": 300,
            "official_price": 0
          },
          {
            "goods_name": "网站设计",
            "id": 118,
            "title": "无忧建站",
            "keywords": [
              "网站设计",
              "网站",
              "创业初期",
              "设计"
            ],
            "price": 200,
            "sell_price": 300,
            "official_price": 0
          },
          {
            "goods_name": "涉外商标注册",
            "id": 48,
            "title": "专业，便捷，贴心",
            "keywords": [
              "质量保证",
              "高效快速",
              "售后完善"
            ],
            "price": 3800,
            "sell_price": 4496.95,
            "official_price": 0
          },
          {
            "goods_name": "商标设计",
            "id": 50,
            "title": "专业团队申请，服务快捷无忧",
            "keywords": [
              "质量保证",
              "售后完善",
              "高效快速"
            ],
            "price": 1000,
            "sell_price": 1200,
            "official_price": 0
          },
          {
            "goods_name": "商标撤三申请",
            "id": 53,
            "title": "专业，便捷，贴心",
            "keywords": [
              "质量保证",
              "高效快速",
              "售后完善"
            ],
            "price": 4500,
            "sell_price": 5000,
            "official_price": 0
          },
          {
            "goods_name": "商标驳回复审",
            "id": 56,
            "title": "专业代办,一站服务,无忧售后",
            "keywords": [
              "质量保证",
              "高效快速",
              "售后完善"
            ],
            "price": 4500,
            "sell_price": 5000,
            "official_price": 0
          },
          {
            "goods_name": "个人社保代缴",
            "id": 65,
            "title": "社保不断缴，福利享更多",
            "keywords": [
              "个人社保"
            ],
            "price": 1216,
            "sell_price": 1540,
            "official_price": 0
          },
          {
            "goods_name": "个人公积金代缴",
            "id": 68,
            "title": "酷企业、更放心",
            "keywords": [
              "个人公积金"
            ],
            "price": 298,
            "sell_price": 300,
            "official_price": 0
          },
          {
            "goods_name": "企业社保代缴",
            "id": 70,
            "title": "社保不断缴，员工更欢喜",
            "keywords": [
              "企业社保"
            ],
            "price": 460,
            "sell_price": 553,
            "official_price": 0
          },
          {
            "goods_name": "社保开户",
            "id": 84,
            "title": "专业团队申请，服务快捷无忧",
            "keywords": [
              "社保"
            ],
            "price": 500,
            "sell_price": 700,
            "official_price": 0
          },
          {
            "goods_name": "印章销毁",
            "id": 114,
            "title": "专业团队申请，服务快捷无忧",
            "keywords": [
              "印章",
              "销毁",
              "印章销毁"
            ],
            "price": 120,
            "sell_price": 266,
            "official_price": 0
          },
          {
            "goods_name": "网站后台功能",
            "id": 116,
            "title": "专业团队，能力优质",
            "keywords": [
              "网站后台",
              "网站",
              "创业初期",
              "后台"
            ],
            "price": 600,
            "sell_price": 700,
            "official_price": 0
          },
          {
            "goods_name": "模板网站调整",
            "id": 117,
            "title": "专业团队，能力优质",
            "keywords": [
              "技术过硬",
              "资历丰厚"
            ],
            "price": 300,
            "sell_price": 400,
            "official_price": 0
          },
          {
            "goods_name": "网站前端效果",
            "id": 119,
            "title": "无忧建站",
            "keywords": [
              "网站前端效果",
              "网站前端",
              "前端效果",
              "网站",
              "网站效果"
            ],
            "price": 50,
            "sell_price": 80,
            "official_price": 0
          },
          {
            "goods_name": "网站运营服务",
            "id": 120,
            "title": "无忧建站",
            "keywords": [
              "网站运营服务",
              "网站运营",
              "运营",
              "运营服务",
              "网站服务"
            ],
            "price": 50,
            "sell_price": 70,
            "official_price": 0
          },
          {
            "goods_name": "测试无规格",
            "id": 147,
            "title": "本地测试商品",
            "keywords": [
              "网站后台"
            ],
            "price": 0,
            "sell_price": 0,
            "official_price": 0
          },
          {
            "goods_name": "实用新型专利申请",
            "id": 57,
            "title": "专业，便捷，贴心",
            "keywords": [
              "质量保证",
              "高效快速",
              "售后完善",
              "知识产权"
            ],
            "price": 2670,
            "sell_price": 3200,
            "official_price": 0
          },
          {
            "goods_name": "发明专利申请",
            "id": 61,
            "title": "专业团队，一站式服务，省心更省钱",
            "keywords": [
              "售后完善",
              "高效快速",
              "知识产权"
            ],
            "price": 5560,
            "sell_price": 6670,
            "official_price": 0
          }
        ],
      }
    },
    mounted() {
      this.initSwiper();
    },
    methods: {
      initSwiper() {
        this.$nextTick(() => {
          let mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项vertical,水平切换horizontal
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            // scrollbar: {
            //   el: '.swiper-scrollbar',
            // },
          })
        });

      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    width: 1200px;
    margin: 20px auto;
  }

  .soid {
    font-size: 0;
  }

  .swiper-slide {
    font-size: 14px;
    height: 100px;
    width: 100%;
    background: aquamarine;
  }

  ::v-deep {
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
      right: 0;
      color: #ffffff;
      background-color: #0099FF;
    }

    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
      left: 0;
      color: #ffffff;
      background-color: #0099FF;
    }

    .swiper-button-next:after, .swiper-button-prev:after {
      font-size: 20px;
    }
  }
</style>
